import React from "react";
import { LoadingOutlined, TagsOutlined } from "@ant-design/icons";
import { ThoughtChain, XRequest } from "@ant-design/x";
import { Button, Descriptions, Splitter } from "antd";
import { createThinkingChainRequest } from "../services/thinkingChainService";
import { THINKING_CHAIN_CONFIG } from "../services/apiService";

import type { ThoughtChainItem } from "@ant-design/x";

const chatId = THINKING_CHAIN_CONFIG.CHAT_ID;
const BASE_URL = `${THINKING_CHAIN_CONFIG.BASE_URL}/${chatId}`;

const exampleRequest = createThinkingChainRequest(chatId);

interface RequestParams {
  agentId: number;
  query: string;
}

const App = () => {
  const [status, setStatus] = React.useState<ThoughtChainItem["status"]>();
  const [lines, setLines] = React.useState<Record<string, string>[]>([]);

  async function request() {
    setStatus("pending");

    await exampleRequest.create(
      {
        question: "Search for the latest technology news",
        overrideConfig: {},
        chatId: chatId,
        streaming: true,
      },
      {
        onSuccess: (messages) => {
          setStatus("success");
        },
        onError: (error) => {
          setStatus("error");
          console.error("onError", error);
        },
        onUpdate: (msg) => {
          setLines((pre) => [...pre, msg]);
        },
      },
    );
  }

  return (
    <Splitter>
      <Splitter.Panel>
        <Button
          type="primary"
          disabled={status === "pending"}
          onClick={request}
        >
          Request - {BASE_URL}
        </Button>
      </Splitter.Panel>
      <Splitter.Panel style={{ marginLeft: 16 }}>
        <ThoughtChain
          items={[
            {
              title: "Request Log",
              status: status,
              icon:
                status === "pending" ? <LoadingOutlined /> : <TagsOutlined />,
              description:
                status === "error" &&
                exampleRequest.baseURL === BASE_URL &&
                "Please replace the BASE_URL, RequestParams with your own values.",
              content: (
                <Descriptions column={1}>
                  <Descriptions.Item label="Status">
                    {status || "-"}
                  </Descriptions.Item>
                  <Descriptions.Item label="Update Times">
                    {lines.length}
                  </Descriptions.Item>
                </Descriptions>
              ),
            },
          ]}
        />
      </Splitter.Panel>
    </Splitter>
  );
};

export default App;
